Теория и практика адаптивной вёрстки. Введение 2018:
В данном премиум курсе мы будем разбирать множество моментов касающихся реализации адаптивной верстки, а также будем рассматривать различные техники при работе с медиа-запросами, изображениями, текстом, видео и другими различными элементами.
Адаптивная верстка подразумевает под собой верстку, при которой внешний вид сайта удобен для взаимодействия с пользователем на различных устройствах, будь то планшет, мобильный телефон, ноутбук или настольный компьютер. Иначе говоря, при адаптивной верстке блоки сайта динамически подстраиваются под различные разрешения экрана.


Урок 1. Теория и практика адаптивной вёрстки. Мета тег Viewport:
От автора: в этом видеоуроке мы обсудим что такое Viewport, поговорим о мета теге viewport, для чего он предназначен, какую роль играет в адаптивной верстке и рассмотрим все его особенности.
По результатам урока вы познакомитесь с мета тегом viewport который необходимо указывать во всех своих адаптивных проектах, а также за что отвечает каждое значение в данном теге.


Урок 2. Теория и практика адаптивной вёрстки. Медиа-запросы. Часть 1:
От автора: в этом уроке мы приступим к изучению медиа-запросов, которые являются неотъемлемой частью в адаптивной верстке и позволяют в зависимости от условия выполнять тот или иной css код.
По результатам урока вы узнаете, что такое медиа-запросы, познакомитесь с их синтаксисом, узнаете какие типы устройств поддерживаются ими, научитесь создавать сложные условия media queries при помощи логических операторов.


Урок 3. Теория и практика адаптивной вёрстки. Медиа-запросы. Часть 2:
От автора: в этом видео мы продолжаем изучение медиа-запросов и перейдем к рассмотрению более продвинутых характеристик.
По результатам видео вы узнаете о таких характеристиках как aspect-ratio (min-aspect-ratio и max-aspect-ratio), отвечающие за соотношение ширины и высоты области просмотра, orientation которая позволяет определять ориентацию устройства. Научимся узнавать поддержку hover-устройством, определять используется ли устройство без указателя и определять плотность пикселей устройства вывода.


Урок 4. Теория и практика адаптивной вёрстки. Адаптивная графика:
От автора: в данном уроке мы поговорим об адаптивной графике и разберем различные техники для работы с адаптивными изображениями.
По результатам видеоурока вы узнаете о стандартном приеме адаптации изображений, познакомитесь с новыми атрибутами srcset, sizes, и тегом , при помощи которых можно выбирать необходимую картинку в зависимости от плотности пикселей устройства, устанавливать ширину изображений в зависимости от определенных условий, пользоваться кадрированием и загружать необходимые изображения в зависимости от поддержки браузером используемого формата.


Урок 5. Теория и практика адаптивной вёрстки. Адаптивное видео:
От автора: сегодня очень популярен видео-контент. Независимо от того, какой сайт: интернет-магазин, блог, сайт-визитка, лендинг – с высокой долей вероятности на нем будет присутствовать видео. И видео тоже должно хорошо отображаться на экранах различных устройств.
В этом видео-уроке мы обсудим работу с адаптивным видео на сайте. Рассмотрим не-сколько вариантов, как вставить адаптивное видео на сайт. По результатам данного урока вы научитесь адаптировать свои видео, встраивая их при помощи html5 тега video, а также устанавливая ролик с любого стороннего ресурса.


Урок 6. Теория и практика адаптивной вёрстки. Адаптивная типографика:
От автора: в данном уроке мы поговорим с вами об адаптивной типографике. Как работать с текстом используя относительные единицы измерения, а также динамически изменять размер шрифта в зависимости от вьюпорта.
По результатам видео-урока вы научитесь использовать единицы измерения rem, позволяя пользователю управлять размером шрифта из браузера, а также разберетесь с динамиче-ским изменением шрифта при помощи vw.


Урок 7. Теория и практика адаптивной вёрстки. Создание адаптивного меню:
От автора: навигация – это очень важная часть сайта, которая должна быть доступна как в десктопной, так и в мобильной версии сайта. Как правило, навигация располагается в верхней части экрана. Но на небольших экранах смартфонов не хочется тратить драгоценное место первого экрана на отображение меню. Лучше как можно выше расположить полезный контент страницы. Поэтому при адаптивной верстке, созданию меню уделяют особое внимание. В данном уроке мы на практике увидим создание адаптивного меню с нуля.
По результатам видео вы узнаете основы создания адаптивного меню, а также увидите, как самостоятельно реализовывать меню с полного нуля, начиная со структуры html, написания CSS-стилей и немного JavaScript.


Урок 8. Теория и практика адаптивной вёрстки. Адаптация двухколоночного макета:
От автора: двухколоночным сайтом называют такой сайт, в котором центральная часть сайта состоит из двух колонок. В одной располагается основной контент страницы, в другой располагается навигация по разделам и рекламные блоки, блоки подписки и так далее. В данном уроке мы рассмотрим практический пример реализации двухколоночного адаптивного макета.
Двухколоночная структура сайта достаточно распространена. Ее можно встретить у блогов, новостных сайтов, у интернет-магазинов. При создании адаптивного сайта, нужно уметь адаптировать его. Причем нужно уметь правильно адаптировать макеты, как с боковой колонкой расположенной справа, так и слева.
По результатам видео урока вы узнаете принцип построения сетки для двухколоночного макета, и увидите как адаптировать, видоизменять и перестраивать сетку, используя медиа запросы.


Урок 9. Теория и практика адаптивной вёрстки. Адаптация трёх колоночного макета:
От автора: трехколоночные сайты – это сайты, в которых в основной его части используется три колонки. В центральной колонке располагается основной контент, а также присутствуют две колонки: справа и слева. Такая структура сайтов менее популярна, чем двухколоночная структура. Встречаются трехколоночные сайты реже. Как правило, эти сайты достаточно объемные по контенту. Трехколоночные сайты сложнее адаптировать.
В данном уроке мы рассмотрим практический пример реализации трехколоночного адаптивного макета. По результатам урока вы увидите создание трехколоночного адаптивного макета. Разберем все тонкости и принципы реализации данной сетки.


Урок 10. Теория и практика адаптивной вёрстки. Адаптация таблиц:
От автора: таблицы адаптировать сложнее всего, потому что таблицы в себе несут смысловой контент, перестроив который, можно полностью нарушить его смысл. В таблицах, как правило, находятся строго упорядоченные данные. Если картинки, видео и даже карты google или яндекс мы можем просто сжать, либо уменьшить в размерах. Если меню сайта мы можем полностью перестроить, то перестроив таблицу, мы можем сделать так, что ей невозможно будет пользоваться, либо она будет показывать данные некорректно.
В данном уроке мы рассмотрим 2 варианта адаптации таблиц без использования сторонних скриптов. По результатам урока вы узнаете, как адаптировать таблицы при помощи двух способов: используя блок обертку или основываясь на data атрибутах. При этом все будет сделано на чистом HTML и CSS без использования скриптов и различных JavaScript-библиотек.